<template>
	<view>
		<swiper-tab-head :tabBars="tabBars" :tabIndex="tabIndex" @changeIndex="tabtap"></swiper-tab-head>
		<view class="uni-tab-bar">
			<swiper class="swiper-box" :style="{height: swiperHeight + 'px'}" :current="tabIndex" @change="tabChange">
				<swiper-item v-for="(items, key) in newList" :key="key">
					<scroll-view scroll-y class="list" @scrolltolower="loadMore(key)">
						<template v-if="items.list.length>0">
							<!-- 话题列表 -->
							<view class="topic-contain">
								<block v-for="(item, index) in items.list" :key="index">
									<topic-list :ischange="ischange" :item="item"></topic-list>
								</block>
								<!-- 上拉加载 -->
								<load-more :loadText="items.loadText"></load-more>
							</view>
						</template>
						<template v-else-if="!items.firstload">
							<view style="font-size: 50rpx;font-weight: bold;color:#CCCCCC;padding-top: 100rpx;" class="m-f-jcc">Loading ...</view>
						</template>
						<template v-else>
							<!-- 无内容默认 -->
							<no-thing></no-thing>
						</template>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import swiperTabHead from '../../components/index/swiper-tab-head.vue'
	import noThing from '../../components/common/no-thing.vue'
	import loadMore from '../../components/common/load-more.vue'
	import topicList from '../../components/news/topic-list.vue'
	export default {
		data() {
			return {
				ischange: false,
				swiperHeight: 500,
				tabIndex: 0,
				tabBars: [],
				newList: [],
			}
		},
		components: {
			swiperTabHead,
			noThing,
			loadMore,
			topicList,
		},
		onLoad(e) {
			if (e.ischange) {
				this.ischange = true
				// 修改页面标题
				uni.setNavigationBarTitle({
					title: '选择所属话题'
				})
			}
			// API -> 系统信息 -> 获取可使用窗口高度
			uni.getSystemInfo({
				success: (res) => {
					let height = res.windowHeight - uni.upx2px(100)
					this.swiperHeight = height
				}
			})
			this.getNav()
		},
		methods: {
			async getNav() { // 获取所有话题分类
				let [err, res] = await this.$http.get('/topicclass')
				if (!this.$http.errorCheck(err, res)) return
				let list = res.data.data.list
				let arr = []
				let arr2 = []
				list.forEach(ele => {
					arr.push({
						id: ele.id,
						name: ele.classname
					})
					arr2.push({
						loadText: '上拉加载更多',
						page: 1,
						list: [],
						firstload: false
					})
				})
				this.tabBars = arr
				this.newList = arr2
				this.tabBars.length > 0 && this.getList()
			},
			async getList() { // 获取指定话题分类下的话题列表
				let url = `/topicclass/${this.tabBars[this.tabIndex].id}/topic/${this.newList[this.tabIndex].page}`
				let [err, res] = await this.$http.get(url)
				let error = this.$http.errorCheck(err, res, ()=> {
					this.newList[this.tabIndex].loadText = '上拉加载更多'
				}, ()=> {
					this.newList[this.tabIndex].loadText = '上拉加载更多'
				})
				if (!error) return
				let arr = []
				let list = res.data.data.list
				list.forEach(ele => {
					arr.push({ 
						id: ele.id,
						titlepic: ele.titlepic,
						title: ele.title,
						desc: ele.desc,
						totlenum: ele.post_count,
						todaynum: ele.todaypost_count,
					})
				})
				this.newList[this.tabIndex].list = this.newList[this.tabIndex].page > 1 ? this.newList[this.tabIndex].list.concat(arr) : arr
				this.newList[this.tabIndex].firstload = true
				if (list.length < 10) {
					this.newList[this.tabIndex].loadText = '没有更多数据了'
				} else {
					this.newList[this.tabIndex].loadText = '上拉加载更多'
				}
				return
			},
			tabtap(index) { // 顶部滑块点击事件
				this.tabIndex = index
			},
			tabChange(e) { // 中间滑块滑动改变事件
				this.tabIndex = e.detail.current
				this.getList()
			},
			loadMore(index) { // 上拉加载
				if (this.newList[index].loadText !== '上拉加载更多') return
				// 修改状态
				this.newList[index].loadText = '加载中...'
				// 获取数据
				this.newList[this.tabIndex].page++
				this.getList()
			}
		}
	}
</script>

<style lang="scss" scoped>
.topic-contain {
	padding: 0 20rpx;
}
</style>
